Deck Icons
Default Deck CSS SVG Icons.
Deck also comes with a number of SVG icons. Optional, Extendable
Usage
- Preview
- Markup
<svg class="icon-24" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-492.92q-57.75 0-95.22-37.47-37.47-37.48-37.47-95.42 0-57.94 37.47-95.22T480-758.31q57.75 0 95.22 37.28t37.47 95.22q0 57.94-37.47 95.42-37.47 37.47-95.22 37.47ZM180-187.69v-75.93q0-32.23 17.08-56.15t44.38-36.77q63.16-28.07 121.76-42.31 58.6-14.23 116.77-14.23 58.16 0 116.47 14.54t121.21 42.27q28.38 12.82 45.35 36.62Q780-295.85 780-263.62v75.93H180Zm45.39-45.39h509.22v-30.54q0-15.61-9.88-29.92-9.88-14.31-25.81-22.46-59-28.69-111.3-40.19-52.3-11.5-107.62-11.5-55.32 0-108.43 11.5-53.11 11.5-111.11 40.19-15.92 8.15-25.5 22.46-9.57 14.31-9.57 29.92v30.54ZM480-538.31q37.46 0 62.38-24.92 24.93-24.92 24.93-62.38 0-37.47-24.93-62.39-24.92-24.92-62.38-24.92T417.62-688q-24.93 24.92-24.93 62.39 0 37.46 24.93 62.38 24.92 24.92 62.38 24.92Zm0-87.3Zm0 392.53Z"/></svg>
Size
- Preview
- Markup
<div class="flex flex-middle gap-lg items-center">
<svg class="icon" style="--icon-size: 28px;"></svg>
<svg class="icon" style="--icon-size: 32px;"></svg>
<svg class="icon" style="--icon-size: 36px;"></svg>
<svg class="icon" style="--icon-size: 40px;"></svg>
<svg class="icon" style="--icon-size: 48px;"></svg>
</div>
Link & Circle
- Preview
- Markup
<div class="flex flex-middle gap-lg items-center">
<a href="#!">
<svg class="icon icon-circle" style="--icon-size: 28px;"></svg>
</a>
<a href="#!">
<svg class="icon icon-circle" style="--icon-size: 32px;"></svg>
</a>
<a href="#!">
<svg class="icon icon-circle" style="--icon-size: 36px;"></svg>
</a>
<a href="#!">
<svg class="icon icon-circle" style="--icon-size: 40px;"></svg>
</a>
<a href="#!">
<svg class="icon icon-circle" style="--icon-size: 48px;"></svg>
</a>
</div>
Action Icon
- Preview
- Markup
<div class="flex flex-middle gap-lg items-center">
<a href="#!" class="icon-action">
<svg class="icon" style="--icon-size: 28px;"></svg>
</a>
<a href="#!" class="icon-action">
<svg class="icon" style="--icon-size: 32px;"></svg>
</a>
<a href="#!" class="icon-action">
<svg class="icon" style="--icon-size: 36px;"></svg>
</a>
<a href="#!" class="icon-action">
<svg class="icon" style="--icon-size: 40px;"></svg>
</a>
<a href="#!" class="icon-action">
<svg class="icon" style="--icon-size: 48px;"></svg>
</a>
</div>
Library
Here is an overview of all currently available icons.